<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="兑换现金" />
    <div class="headMarginTop boxMain" style="height:100vh">
      <div class="everyBlockBgcolor exchangeBox">
        <div class="exchangePadding">
          <div class="dqjifen">现有积分 {{integralNum}}</div>
          <div class="displayFlex jifen money">
            <input type="number" @input="inputNum" v-model="integral" />
          </div>
          <div class="displayFlex keExchange" v-if="integral>=100">
            <p>可用{{integral}}积分兑换现金 ￥{{exchangeMoney}}</p>
            <p class="btnAll" @click="btnAllExchange">全部兑换</p>
          </div>
          <div class="displayFlex keExchange" v-if="integral<100 && integralNum>100">
            <p>当前输入的积分不足，不能兑换现金</p>
            <p></p>
          </div>
          <div class="displayFlex keExchange" v-if="integral<100 && integralNum<100">
            <p>当前积分不足，不能兑换现金</p>
            <p></p>
          </div>
          <div class="exchangeTisi">提示：只能输入100的倍数。例100,200,300...</div>
        </div>
      </div>
      <div class="exchangeBg" @click="btnExchange">确认兑换</div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { userInfo, userBalance } from "@/services/personCenter";
export default {
  components: {
    headerT
  },
  name: "",
  data() {
    return {
      integralNum: 0, //当前积分
      exchangeMoney: 0, //可兑换的现金
      integral: 100, //输入的积分（最少100）
    };
  },
  created() {
    this.getUserInfo();
  },
  watch: {},
  methods: {
      //兑换全部积分
    btnAllExchange(){
        this.integral =
            Number(this.integralNum) - (Number(this.integralNum) % 100); //计算出当前可用的积分
          console.log(
            this.integral,
            "integraNum",
            Number(this.integralNum) % 100
          );

          if (this.integral >= 100 && this.integral % 100 == 0) {
            this.exchangeMoney = Number(this.integral / 100).toFixed(0);
          } else {
            this.exchangeMoney = 0;
          }
    },
    btnExchange() {
      //积分兑换现金
      const _this = this;
      if(this.integral>this.inputNum){
          this.$vux.toast.text('输入的积分不能大于当前积分！！！', 'top')
            return;
      }
      if (
        this.integral < 100 &&
        this.integral % 100 != 0
      ) {
        this.$vux.toast.text('当前输入的积分不正确！！！', 'top')
        return;
      }
      this.$vux.loading.show({
        text: "Loading"
      });
      _this.$post(userBalance, { integral: _this.integral }).then(res => {
        this.$vux.loading.hide();
        if(res.code==200){
           this.$vux.toast.text(res.message, 'middle')
            _this.getUserInfo()
        }
      }).catch(error => {
          this.$vux.loading.hide();
        });
    },
    inputNum() {
      //计算输入的积分可兑换多少现金
      const _this = this;
      if (
        this.integral <= this.integralNum &&
        this.integral >= 100 &&
        this.integral % 100 == 0
      ) {
        this.exchangeMoney = Number(this.integral / 100).toFixed(0);
      } else {
        this.exchangeMoney = 0;
      }
    },
    getUserInfo() {
      //获取用户信息
      this.$post(userInfo).then(res => {
        if (res.code == 200 && res.data != null) {
          this.integralNum = Number(res.data.integral);
          this.integral =
            Number(this.integralNum) - (Number(this.integralNum) % 100); //计算出当前可用的积分
          console.log(
            this.integral,
            "integraNum",
            Number(this.integralNum) % 100
          );

          if (this.integral >= 100 && this.integral % 100 == 0) {
            this.exchangeMoney = Number(this.integral / 100).toFixed(0);
          } else {
            this.exchangeMoney = 0;
          }
        }
      });
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@fontsize32: 0.32rem;
#headBox {
  .boxMain {
    padding: 0.2rem 0;
    .exchangeBox {
      //   height: 4.24rem;
      margin: 0.49rem 0.34rem 0.52rem 0.37rem;
      .exchangePadding {
        padding: 0 0.34rem 0 0.49rem;
        color: #4e4e4e;
        font-size: 0.3rem;
        .dqjifen {
          padding: 0.5rem 0 0 0;
        }
        .jifen {
          font-size: 1.23rem;
          font-weight: bold;
        }
        .money {
          input {
            height: 100%;
            width: 95%;
            border: none;
            padding: 0.3rem;
            font-size: 1.23rem;
            font-weight: bold;
          }
        }
        .keExchange {
          margin-top: 0.4rem;
          justify-content: space-between;
          p:last-child {
            color: #f78c37;
          }
          .btnAll{
            //   border: 1px solid red;
              padding: 0.2rem 0.3rem;
          }
        }

        .exchangeTisi {
          padding: 0.3rem 0;
          color: @colorRed;
        }
      }
    }
    .exchangeBg {
      height: 2.02rem;
      background-image: url("/static/images/changeBg.png");
      background-size: 100%;
      font-size: 0.39rem;
      text-align: center;
      line-height: 2.02rem;
      color: #ffffff;
    }
  }
}
</style>
